{% load i18n static common %}
<style>
  #{{ model_name }}_edit_form .layui-form-switch {
    margin-top: 0px;
  }

</style>
{% autoescape off %}
<div id="{{ model_name }}_edit_form" style="padding: 10px;height: 390px">
  <form class="layui-form data-form shift-add-form" action="" method="post" lay-filter="shiftForm">
    <input type="hidden" id="id_model_pk" name="pk" value="{{ object_id }}">
    <input type="hidden" id="id_days" name="days" class="layui-hide">
    {% csrf_token %}
    <div class="layui-row">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-body">
             <div class="layui-form-item  {% if not request.user.is_superuser or adminform.form.base_fields.company.queryset.count == 1 %} layui-hide {% endif %}">
                {% layui_inline adminform.form.company %}
            </div>
            <div class="layui-form-item">
                {% layui_inline adminform.form.alias %}
                {% layui_switch adminform.form.auto_shift %}
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header" style="padding: 0 0 0 3px;background-color: #f2f2f2;">
            <div class="layui-form">
              <div class="layui-form-item">
                <div class="layui-inline">
                    <input id="id_frameTimetableSearch" type="text"
                           placeholder="{% trans 'schedule_timetableFrameSearch_placeholder_timetable' %}"
                           name="frame-timetabel-search" autocomplete="off"
                           class="layui-input"style="
                            max-width: 199px;
                        ">
                </div>
                <div class="layui-inline">
                  <div class="button-3d" lay-submit="" lay-filter="timetableSearch"
                       style="background-color: #f2f2f2;padding: 0 10px;">
                    <i class="fa fa-fw fa-search"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-card-body">
            <table id="schedule_timetable" class="layui-hide" lay-filter="scheduleTimetable"></table>
          </div>
        </div>
      </div>
      <div class="layui-col-md6" style="padding: 0 0 0 10px">
        <div class="layui-card">
          <div class="daily-shift-attr layui-card-header" style="background-color: #f2f2f2;"><div class="layui-form">
            <div class="layui-form-item">
              {% layui_inline adminform.form.cycle_unit %}
              {% layui_inline adminform.form.shift_cycle %}
                <style>
                  .field-cycle_unit label{
                      width: 81px !important;
                      min-width: 0px!important;
                      max-width: 81px!important;
                  }
                  .field-shift_cycle label{
                      width: 81px!important;
                      min-width: 0px!important;
                      max-width: 81px!important;
                  }
                </style>
            </div>
            <div class="layui-form-item layui-hide">
              {% layui_inline adminform.form.daily_shift %}
              {% layui_inline adminform.form.daily_shift_display %}
            </div>
          </div></div>
          <div class="layui-card-body">
            <table id="id_dailyShift" class="layui-hide" lay-filter="dailyShift"></table>
          </div>
        </div>
      </div>
      <div class="layui-col-md12">
        <div class="layui-card"><div class="layui-card-body">
          <div><span style="color: red">*</span><span>{% trans 'form_helpText_title' %}</span></div>
          <div style="padding: 0 20px;">
            <p>{% trans 'shift_helpText_tip1' %}</p>
            <p>{% trans 'shift_helpText_tip2' %}</p>
            <p>{% trans 'shift_helpText_tip3' %}</p>
            <p>{% trans 'shift_helpText_tip4' %}</p>
          </div>
        </div></div>
      </div>
    </div>
  </form>
</div>
<script>
  $(function () {
    layui.use(['form', 'laydate', 'table', 'tablePlug', 'layer'], function () {
      var table = layui.table, tablePlug = layui.tablePlug, form = layui.form, layer = layui.layer;
      tablePlug.smartReload.enable(true);
			$("#id_cycle_unit").attr('lay-filter','cycleUnit');
      var timetableOpts = {
        id: 'schedule_timetable'
        , elem: "#schedule_timetable"
        , height: 275
        , text: {none: gettext('none_data')}
        , request: {
          pageName: 'page',
          limitName: 'page_size'
        }
        , page: {
          layout: ['count', 'prev', 'page', 'next', 'limit']
          , limit: 20
          , limits: [20, 50, 80, 100, 200]
          , groups: 1
        }
        , cols: [[
          {field: 'id', type: 'checkbox'},
          {field: 'alias', title: '{% trans 'timeInterval_field_alias' %}'},
          {field: 'company_name', title: '{% trans 'companyRelate_field_Company' %}'},
          {field: 'in_time', title: '{% trans 'timeInterval_field_checkIn' %}'},
          {field: 'out_time', title: '{% trans 'timeInterval_field_checkOut' %}', templet: function (data) {
            if(data.cross_day > 0){
                return data.out_time + '<sup>+'+data.cross_day + '</sup>';
            }else{
                return data.out_time;
            }
          }},
          {field: 'break_time_duration', title: '{% trans 'timeInterval_field_breakTime' %}'}
        ]]
        , url: '/att/api/timeintervals/'
        ,where:{company:{{ adminform.form.fields.company.initial.id }}}
        ,done:delete this.where
      };
      var timeTable = table.render(timetableOpts);
      var week = [
        gettext('weekday_shortWrite_sunday'), gettext('weekday_shortWrite_monday'),
        gettext('weekday_shortWrite_tuesday'), gettext('weekday_shortWrite_wednesday'),
        gettext('weekday_shortWrite_thursday'), gettext('weekday_shortWrite_friday'),
        gettext('weekday_shortWrite_saturday')
      ];
      var week_cols = [[{field: 'cycle', title: '', fixed: true, type: 'numbers'}]];
      for(var i=0; i < week.length; i ++){
        week_cols[0].push({field: i.toString(), title: week[i], event:'assignTimeTable'+i});
      }
      var dailyShiftOpts = {
        id: 'id_dailyShift'
        , elem: "#id_dailyShift"
        , height: 275
        , text: {none: gettext('none_data')}
        , request: {
          pageName: 'page',
          limitName: 'page_size'
        }
        , page: false
        , limit: 365
        , cols: week_cols
        , data: []
      };
      {#var dailyShiftTable = table.render(dailyShiftOpts);#}
      var shift_days = {
        0: 1,
        1: 7,
        2: 31,
        3: 1,
        4: 1,
        5: 1,

      };
      table.on('tool(dailyShift)', function(obj){
        var cycle_unit = $("#id_cycle_unit").val();
        var event = obj.event.replace('assignTimeTable', '');
        var checkStatus = table.checkStatus('schedule_timetable');
        var tbs = [], tbIDs = [];
        checkStatus.data.forEach(function (item, index) {
          tbs.push(item.alias);
          tbIDs.push(item.id);
        });
        var item = {};
        item[event] = tbs.join(',');
        obj.update(item);
        var days = shift_days[cycle_unit];
        var daily_shift_string = $("#id_daily_shift").val();
        var daily_shift = {};
        if(daily_shift_string !== ""){
          daily_shift = JSON.parse(daily_shift_string);
        }
        daily_shift[(((parseInt(obj.data.cycle) - 1) * days) + parseInt(event))] = tbIDs.join(',');
        $("#id_daily_shift").val(JSON.stringify(daily_shift));
      });
      form.render();
      function cycleUnitChange(cycle, unit) {
        switch (unit) {
          case 0:
            $("#id_shiftCycle").attr("max", '366');
            table.reload(timeTable.config.id, {where: {use_24_mode : '',cross_day:'',company:$('input[name=company]').val()}});
            if (cycle > 366) {
              layer.msg(gettext('shift_cycleError_dayCycleExceed366'), {icon: 5});
              $("#id_shiftCycle").val("366");
              return;
            }
            var _cols = [[{field: 'cycle', title: '', fixed: true, type: 'numbers'}]];
            _cols[0].push({field: '0', title: '{% trans 'att_model_timeInterval' %}', event: 'assignTimeTable0'});
            var _data = [];
            for (var c = 0; c < cycle; c++) {
              _data.push({cycle: c+1, 0: ''});
            }
            dailyShiftOpts['cols'] = _cols;
            dailyShiftOpts['data'] = _data;
            table.render(dailyShiftOpts);
            break;
          case 1:
            $("#id_shiftCycle").attr("max", '52');
            table.reload(timeTable.config.id, {where: {use_24_mode : '',cross_day:'',company:$('input[name=company]').val()}});
            if (cycle > 52) {
              layer.msg(gettext('shift_cycleError_weekCycleExceed52'), {icon: 5});
              $("#id_shiftCycle").val("52");
              return;
            }
            var _data = [];
            for (var c = 0; c < cycle; c++) {
              _data.push({cycle: c+1, 0: '', 1: '', 2: '', 3: '', 4: '', 5: '', 6: ''});
            }
            dailyShiftOpts['cols'] = week_cols;
            dailyShiftOpts['data'] = _data;
            table.render(dailyShiftOpts);
            break;
          case 2:
            $("#id_shiftCycle").attr("max", '12');
            table.reload(timeTable.config.id, {where: {use_24_mode : '',cross_day:'',company:$('input[name=company]').val()}});
            if (cycle > 12) {
              layer.msg(gettext('shift_cycleError_monthCycleExceed12'), {icon: 5});
              $("#id_shiftCycle").val("12");
              return;
            }
            var _cols = [[{field: 'cycle', title: '', fixed: true, type: 'numbers'}]];
            var _data = [];
            for (var j = 0; j < 31; j++) {
              _cols[0].push({field: j.toString(), title: (j + 1), event: 'assignTimeTable'+j})
            }
            for (var c = 0; c < cycle; c++) {
              var item = {cycle: (c + 1)};
              for (i = 0; i < 31; i++) {
                item[i] = '';
              }
              _data.push(item);
            }
            dailyShiftOpts['cols'] = _cols;
            dailyShiftOpts['data'] = _data;
            table.render(dailyShiftOpts);
            break;
            case 3:
            case 4:
            case 5:
                 $("#id_shiftCycle").attr("max", '366');
                 $("#id_shift_cycle").val(unit-1);
                 cycle = unit-1
                if (cycle > 366) {
                  layer.msg(gettext('shift_cycleError_dayCycleExceed366'), {icon: 5});
                  $("#id_shiftCycle").val("366");
                  return;
                }
                var _cols = [[{field: 'cycle', title: '', fixed: true, type: 'numbers'}]];
                _cols[0].push({field: '0', title: '{% trans 'att_model_timeInterval' %}', event: 'assignTimeTable0'});
                var _data = [];
                for (var c = 0; c < cycle; c++) {
                  _data.push({cycle: c+1, 0: ''});
                }
                dailyShiftOpts['cols'] = _cols;
                dailyShiftOpts['data'] = _data;
                table.render(dailyShiftOpts);
                $("#id_shift_cycle").val(unit-1);
                if(unit==3){
                    table.reload(timeTable.config.id, {where: {use_24_mode : 1,cross_day:'',company:$('input[name=company]').val()}});
                }else {
                    if (unit == 4) {
                        cross_day_i = 1
                    } else {
                        cross_day_i = '2,3'
                    }
                    table.reload(timeTable.config.id, {where: {cross_day : cross_day_i,use_24_mode : '',company:$('input[name=company]').val()}});
                }
                $("#id_cycle_unit").val(0);
                break;
          default:
            break;
        }
        form.render();
      };
      var _cycle = $("#id_shift_cycle").val();
      var _unit = $("#id_cycle_unit").val();
       cycleUnitChange(parseInt(_cycle), parseInt(_unit));
      dailyShiftOpts['data'] = JSON.parse($("#id_daily_shift_display").val());
      table.render(dailyShiftOpts);
      form.on('select(cycleUnit)', function (data) {
        var unit = data.value;
        var cycle = $("#id_shift_cycle").val();
        cycleUnitChange(parseInt(cycle), parseInt(unit));
        $("#id_daily_shift").val("");
      });
      $("#id_shift_cycle").change(function () {
        var unit = $("#id_cycle_unit").val();
        var cycle = $(this).val();
        cycleUnitChange(parseInt(cycle), parseInt(unit));
        $("#id_daily_shift").val("");
      });
      form.on('submit(timetableSearch)', function () {
        var alias = $("#id_frameTimetableSearch").val();
        var company =  $('select[name=company]').val();
        if("{{ add }}" =="False"){
             var company = "{{ adminform.form.initial.company }}";
        }
        timeTable.where = {}
        if(company){
           table.reload(timeTable.config.id, {where: {alias__icontains: alias,company:company}});
        }else{
             layer.open({
                time:1000,
                content: "{% trans 'company_field_is_required' %}",
                btn: ['ok'],
                title: 'Message',
                icon: 5
            });
            layer.closeAll('loading');
        }
      });
      $("#id_frameTimetableSearch").keypress(function (event) {
        if (event.keyCode == "13") {
          var alias = $(this).val();
          var company =  $('select[name=company]').val();
            if("{{ add }}" =="False"){
                 var company = "{{ adminform.form.initial.company }}";
            }
            timeTable.where = {}
            if(company){
               table.reload(timeTable.config.id, {where: {alias__icontains: alias,company:company}});
            }else{
                 layer.open({
                    time:1000,
                    content: "{% trans 'company_field_is_required' %}",
                    btn: ['ok'],
                    title: 'Message',
                    icon: 5
                });
                layer.closeAll('loading');
            }
        }
      });
      if("{{ add }}" =="False"){
        $('input[id^=company][id$=_show]').attr("disabled", "disabled");
        form.render();
        table.reload(timeTable.config.id, {where:  {company:  "{{ adminform.form.initial.company }}"}});
      }else{
          $('select[name=company]').attr("lay-filter", "company");
          $('select[name=company]').attr("placeholder", "{% trans 'companyRelate_field_Company' %}");
          form.render('select');
          form.on('select(company)', function (data) {
              company_id = data.value;
              table.reload(timeTable.config.id, {where:  {company:  company_id}});
              var length = dailyShiftOpts.cols[0].length;
              for(var i = 0;i < length; i ++) {
                  dailyShiftOpts.data[0][i] = "";
              }
              table.render(dailyShiftOpts);
              $("#id_daily_shift").val("");
          });
      }
    });
  });
</script>
{% endautoescape %}